[初心者向け] 0から始めるSocket.IOを利用したチャットアプリ作成

こんにちは！コンサル部のinomaso(@inomasosan)です。

Socket.IOを仕事で触る機会があったので、公式ドキュメントのシンプルなチャットアプリを作成するスタートアップガイドで学習してみました。

Socket.IOって何？

Socket.IOは、ブラウザとサーバー間のリアルタイム、双方向、イベントベースの通信を可能にするライブラリです。
Node.js用サーバー側ライブラリと、ブラウザ用JavaScriptクライアントライブラリで構成されています。

ユースケースとして、チャットのようなリアルタイムなWebアプリを作成することが可能です。

スタートアップガイドの対象者について

スタートアップガイドの冒頭にある通り、Node.jsやSocket.IOの前提知識は、ほとんど必要ないので、アプリを開発したことない初心者にもおすすめです。

In this guide we’ll create a basic chat application. It requires almost no basic prior knowledge of Node.JS or Socket.IO, so it’s ideal for users of all knowledge levels.

内容は英語となりますが、ChromeやDeepLで翻訳しながら、上から順に学習していくことで、コードを理解しつつチャットアプリを作成することが可能です。

学べること

学習時間は１時間程度となります。 スタートアップガイドには下記の項目が含まれています。

• The web framework
  • Expressを利用したシンプルなWebページ作成
• Serving HTML
  • HTMLを別ファイルに作成
• Integrating Socket.IO
  • Socket.IOのパッケージを追加し、接続・切断のイベント表示
• Emitting events
  • クライアントのメッセージを、サーバがイベントとして取得
• Broadcasting
  • サーバが取得したメッセージを、全クライアントに送信

サンプル

最終的には、スタートアップガイドにある以下画像のチャットアプリが完成します。

また、サンプルコードはGithubにアップロードされています。
個人的には、コードを理解するためにローカルファイルを修正し、エラーが解決しそうになければGithubのコードを参考にするのが良いかと思います。

まとめ

少しずつコード変更して学習できるドキュメントだったので、個人的にすごく良かったです！ 次回はこちらで作成したアプリをコンテナ化してみたいと思います。

別の記事でアプリをコンテナ化したブログを書いてみました。ご興味のある方は、こちらの記事もご参照ください！

この記事が、どなたかのお役に立てば幸いです。それでは！